<template>
  <div class="xd-LearningHome-PolicyInterpretation">
    <el-tabs v-model="activeName" class="el-tabs-first-indent">
      <el-tab-pane label="最新政策" name="tabNews">
        <el-card class="box-card m_t_b_5px" shadow="hover">
          <el-form ref="form" :model="formNews" label-width="80px">
            <el-form-item label="政策分类：">
              <el-radio-group v-model="formNews.themeType" size="small" @change="newsQuery">
                <el-radio-button
                  :label="item.dictValue"
                  v-for="item in themeTypeList"
                  :key="item.dictValue"
                >{{item.dictLabel}}</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label style="margin-top:20px;">
              <el-input
                v-model="formNews.policyTitle"
                clearable
                placeholder="请输入关键字"
                size="small"
                style="width:300px;margin-right:10px;"
              ></el-input>
              <el-button type="primary" size="small" @click="newsQuery">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card class="m_t_b_5px news_panel" shadow="hover">
          <ul class="news_list item_flex_ul">
            <li v-for="p in newsData.list" :key="p.policyId" @click="goNewsDetail(p.policyId,'1')">
              <span class="title">· {{p.policyTitle}}</span>
              <span class="time">{{p.createTime}}</span>
            </li>
            <p class="no-data" v-if="!newsData.list.length">{{NO_DATA}}</p>
          </ul>
          <el-pagination
            @size-change="sizeChange"
            @current-change="pageChange"
            :current-page="formPolicy.page"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="formPolicy.size"
            :layout="PAGE_LAYOUT"
            :total="newsData.total"
          ></el-pagination>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="政策解读" name="tabPolicy">
        <el-card class="box-card m_t_b_5px" shadow="hover">
          <el-form ref="form" :model="formPolicy" label-width="80px">
            <el-form-item label="政策分类：">
              <el-radio-group v-model="formPolicy.themeType" size="small" @change="policyQuery">
                <el-radio-button
                  :label="item.dictValue"
                  v-for="item in themeTypeList"
                  :key="item.dictValue"
                >{{item.dictLabel}}</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label style="margin-top:20px;">
              <el-input
                v-model="formPolicy.analysisTitle"
                clearable
                placeholder="请输入关键字"
                style="width:300px;margin-right:10px;"
                size="small"
              ></el-input>
              <el-button type="primary" size="small" @click="policyQuery">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card class="m_t_b_5px news_panel" shadow="hover">
          <ul class="news_list item_flex_ul">
            <li v-for="p in policyData.list" :key="p.id" @click="goNewsDetail(p.id,'2')">
              <span class="title">· {{p.analysisTitle}}</span>
              <span class="time">{{p.createTime}}</span>
            </li>
            <p class="no-data" v-show="!policyData.list.length">{{NO_DATA}}</p>
          </ul>
          <el-pagination
            @size-change="sizeChange"
            @current-change="pageChange"
            :current-page="formPolicy.page"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="formPolicy.size"
            :layout="PAGE_LAYOUT"
            :total="policyData.total"
          ></el-pagination>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  name: 'PolicyHome',
  data() {
    return {
      activeName: 'tabNews',
      formPolicy: {
        fileType: '',
        themeType: '',
        analysisTitle: '',
        page: 1,
        size: 10
      },
      newsData: {
        total: 0,
        list: []
      },
      policyData: {
        total: 0,
        list: []
      },
      formNews: {
        fileType: '',
        themeType: '',
        policyTitle: '',
        pageNumber: 1,
        pageSize: 10
      },
      fileTypeList: [{
        dictValue: '',
        dictLabel: '不限'
      }],
      themeTypeList: [{
        dictValue: '',
        dictLabel: '不限'
      }]
    }
  },
  mounted() {
    this.$store.commit('updateActiveMenu', '/LearningHome/PolicyInterpretation')
    this.getThemeList()
    this.policyQuery()
    this.newsQuery()
  },
  methods: {
    newsQuery() {
      utils.post(utils.api.policyInfo.policyNewsList, this.formNews, res => {
        if (res.success) {
          this.newsData.total = res.data.total
          this.newsData.list = res.data.rows
        }
      })
    },
    policyQuery() {
      utils.post(utils.api.policyInfo.policyList, this.formPolicy, res => {
        if (res.success) {
          this.policyData.total = res.data.total
          this.policyData.list = res.data.rows
        }
      })
    },
    sizeChange(val) {
      if (this.activeName === 'tabPolicy') {
        this.formPolicy.size = val
        this.policyQuery()
      } else {
        this.formNews.pageSize = val
        this.newsQuery()
      }
    },
    pageChange(val) {
      if (this.activeName === 'tabPolicy') {
        this.formPolicy.page = val
        this.policyQuery()
      } else {
        this.formNews.pageNumber = val
        this.newsQuery()
      }
    },
    getThemeList() {
      utils.post(utils.api.policyInfo.themeTypeList, {}, res => {
        if (res.success) {
          this.themeTypeList = this.themeTypeList.concat(res.data.rows)
        }
      })
    },
    goNewsDetail(id, tag) {
      this.$router.push({ path: '/LearningHome/PolicyInterpretation/PolicyDetail', query: { id: id, tag: tag } })
    }
  }
}
</script>

<style lang="less">
.xd-LearningHome-PolicyInterpretation {
  // width: 1200px;
  margin: 0 auto;

  .el-form-item {
    margin-bottom: 0px;
    .el-form-item__label {
      padding: 0px;
      text-align: left;
      font-size: 16px;
    }
  }

  .el-radio-group {
    .el-radio-button__inner {
      border: none;
      font-size: 16px;
    }
    .el-radio-button:last-child .el-radio-button__inner,
    .el-radio-button:first-child .el-radio-button__inner {
      border-radius: 0px;
    }
  }

  .news_panel {
    ul.news_list li {
      border-bottom: solid 1px #dcdfe6;
      padding-bottom: 5px;
    }
  }
}
</style>